<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" :model="queryParams" size="small" label-width="84px">
        <el-form-item label="告警类型">
          <el-input clearable v-model="queryParams.alarmType" placeholder="请输入告警类型"> </el-input>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="queryParams.eqptTypeId" @change="getProductList" placeholder="请选择设备类型" clearable>
            <el-option
              v-for="item in eqptTypeList"
              :key="item.eqptTypeId"
              :label="item.eqptType"
              :value="item.eqptTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品名">
          <el-select
            v-model="queryParams.judgeId"
            :disabled="!queryParams.eqptTypeId"
            clearable
            placeholder="请选择品名"
            filterable
          >
            <el-option
              v-for="item in productList"
              :key="item.judgeId"
              :label="item.prductName"
              :value="item.judgeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchData">查询</el-button>
          <el-button @click="handleAdd" type="primary" icon="plus" size="small">添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column type="index" width="80" label="编号"></el-table-column>
        <el-table-column prop="alarmType" label="告警类型"></el-table-column>
        <el-table-column prop="eqptTypeName" label="设备类型">
          <template slot-scope="scope">
            {{ scope.row.eqptTypeName ? scope.row.eqptTypeName : '----' }}
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="品名">
          <template slot-scope="scope">
            {{ scope.row.productName ? scope.row.productName : '----' }}
          </template>
        </el-table-column>
        <el-table-column prop="contactPersons" label="告警干系人"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row.strategyId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="totalPageNum"
      ></el-pagination>
    </el-card>

    <strategy-modal
      :eqptTypeList="eqptTypeList"
      :alarmTypeList="alarmTypeList"
      ref="StrategyModal"
      @ok="StrategyModalOk"
    ></strategy-modal>
  </section>
</template>

<script>
import { getEqptType, getAlarmStrategyList, delAlarmStrategy, getProductList } from './js/alarm'
// import { getEqptType } from '@/api/api'
import StrategyModal from './components/StrategyModal'
export default {
  name: 'StrategyList',
  components: { StrategyModal },
  data () {
    return {
      queryParams: {},
      alarmTypeList: [],
      eqptTypeList: [],
      productList: [],
      pageNum: 1,
      pageSize: 10,
      totalPageNum: 0,
      tableData: []
    }
  },
  mounted () {
    this.getEqptType()
    this.initData()
  },

  methods: {
    // 查询按钮
    searchData () {
      this.pageNum = 1
      this.initData()
    },

    // 获取告警列表
    async initData () {
      const params = {
        current: this.pageNum,
        pageSize: this.pageSize
      }
      const { code, data, msg } = await getAlarmStrategyList(Object.assign({}, this.queryParams, params))
      if (code === 0) {
        this.tableData = data.records
        this.totalPageNum = data.total
      } else {
        this.$message.warning(msg)
      }
    },

    // 新增
    handleAdd () {
      this.$refs.StrategyModal.add()
    },

    // 编辑按钮
    handleEdit (row) {
      this.$refs.StrategyModal.edit(row)
    },

    // 删除按钮
    handleDelete (strategyId) {
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.dataDelete(strategyId)
        })
        .catch(() => {
          this.$message.warning('已取消删除')
        })
    },
    // 删除函数
    async dataDelete (strategyId) {
      const { code, msg } = await delAlarmStrategy(strategyId)
      if (code === 0) {
        this.$message.success('删除成功')
        if (this.tableData.length === 1 && this.currentPage > 1) {
          this.currentPage--
        }
        this.initData()
      } else {
        this.$message.warning(msg)
      }
    },

    // 获取设备类型
    async getEqptType () {
      const { code, data, msg } = await getEqptType()
      if (code === 0) {
        this.eqptTypeList = data || []
      } else {
        this.$message.warning(msg)
      }
    },
    // 获取设备品名 20210723 jiang
    async getProductList (value) {
      if (value != null && value !== '' && value !== undefined) {
        const { code, data, msg } = await getProductList(value)
        if (code === 0) {
          this.productList = data
          this.$set(this.queryParams, 'judgeId', '')
        } else {
          this.$message.warning(msg)
        }
      }
    },

    // 弹框回调
    StrategyModalOk () {
      this.initData()
    },

    // 页码改变
    pageHandleChange (page) {
      this.pageNum = page
      this.initData()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  .table-btn {
    margin-bottom: 15px;
  }
  .header-card {
    margin-bottom: 10px;
  }
  .table-card {
    .el-pagination {
      text-align: center;
      display: block;
      margin: 10px auto;
    }
    /deep/ .el-table th {
      display: table-cell !important;
    }
    .endTime {
      margin-left: 20px;
    }
    .time-span {
      margin-right: 5px;
    }
  }
  .el-dialog {
    .el-select {
      width: 100%;
    }
  }
}
</style>
